<html>
<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css" />
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css" />
<!--vue脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/vue-3.2.4.global.js">
</script>
<!--axios脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-0.18.0.min.js">
</script>
<!--我们自己封装的axios函数库 -->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-helper.js">
</script>
<style type="text/css">

a:hover {
	text-decoration: none;
}

.bgc-w {
	background-color: #fff;
}
.red{
	color:#d9534f;
	font-weight:100;
	font-size:1px;
}
</style>
<body id="app">
<div class="row" style="padding-top: 10px;">
	<div class="col-md-2">
		<h1 style="font-size: 24px; margin: 0;" class="">通知管理</h1>
	</div>
	<div class="col-md-10 text-right">
		<a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
			disabled="disabled">通知管理</a>
	</div>
</div>
<div class="row" style="padding-top: 15px;">
	<div class="col-md-12">
		<!--id="container"-->
	
		<div class="bgc-w box">
			<!--盒子头-->
			<div class="box-header">
				<h3 class="box-title">
					<a href="javascript:history.back();" class="label label-default"
						style="padding: 5px;"> <i
						class="glyphicon glyphicon-chevron-left"></i> <span>返回</span>
					</a>
				</h3>
			</div>
			<form action="informcheck" method="post" id="thisForm" onsubmit="return check();">
				<!--盒子身体-->
				<div class="box-body no-padding">
					<div class="box-body">
						<div class="alert alert-danger alert-dismissable" role="alert"
							style="display: none;">
							错误信息:<button class="close" type="button">&times;</button>
							<span class="error-mess"></span>
						</div>
						<div class="row">
							<div class="col-md-6 form-group">
								<label class="control-label"><span>类型</span></label>
								<select class="form-control" v-model="aoaNoticeList.typeId" name="typeId" >
										<option value="10">公告</option>
										<option value="11">通知</option>
										<option value="12">投票</option>
								</select>
							</div>
							<div class="col-md-6 form-group">
								<label class="control-label"><span>状态</span></label> 
								<select class="form-control" v-model="aoaNoticeList.statusId" name="statusId">
										<option value="14">一般</option>
										<option value="15">重要</option>
										<option value="16">紧急</option>
								</select>
							</div>
							<div class="col-md-6 form-group">
								<label class="control-label"><span>标题</span></label>
								 <input class="form-control" v-model="aoaNoticeList.title" value="" name="title"/>
							</div>
							<div class="col-md-6 form-group">
								<label class="control-label"><span>链接</span></label> 
								 <input	class="form-control" value="" v-model="aoaNoticeList.url" name="url"/>
							</div>
							<div class="col-md-6 form-group">
								<label class="control-label"><span>描述</span></label> 
								<textarea class="form-control text" rows="5" cols="20" v-model="aoaNoticeList.content" name="content"></textarea>
							</div>
							<div class="col-md-6 form-group">
								<label class="control-label"><span>置顶</span></label><br>
										<span class="labels"><label><input name="top" type="checkbox"><i>✓</i></label></span>
							</div>
						</div>
				</div>
				</div>

				<!--盒子尾-->
				<div class="box-footer">
					<input class="btn btn-primary" id="save" type="button" @click="add()" value="保存" />
					<input class="btn btn-default" id="cancel" type="button" value="取消"
						onclick="window.history.back();" />
				</div>
			</form>
		</div>

	</div>
</div>

<style type="text/css">
#thismodal .modal-dialog {
	width: 500px;
	top:20%;
}

#thismodal .modal-body .icon {
	height: 80px;
	width: 80px;
	margin: 20px auto;
	border-radius: 50%;
	color: #aad6aa;
	border: 3px solid #d9ead9;
	text-align: center;
	font-size: 44px;
}

#thismodal .modal-body .icon .glyphicon {
	font-size: 46px;
	top: 14px;
}

#thismodal .modal-p {
	margin: 20px auto;
}

#thismodal .modal-body .modal-p h2 {
	text-align: center;
}

#thismodal .modal-body .modal-p p {
	text-align: center;
	color: #666;
	font-size: 16px;
	padding-top: 8px;
	font-weight: 300;
}

#thismodal .modal-p .btn {
	margin-left: 40%;
	width: 100px;
	height: 40px;
}

#thismodal .modal-error .icon {
	color: #f27474;
	border: 3px solid #f27474;
}
</style>

<div class="modal fade in" id="thismodal" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body modal-success" style="display: none;">
				<div class="icon">
					<span class="glyphicon glyphicon-ok"></span>
				</div>
				<div class="modal-p">
					<h2>操作成功</h2>
					<!--<p style="">已回复</p>-->
					<div class="modal-p">
						<button type="button" class="btn btn-primary successToUrl" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
			<div class="modal-body modal-error" style="display: none;">
				<div class="icon">
					<span class="glyphicon glyphicon-remove"></span>
				</div>
				<div class="modal-p">
					<h2 style="text-align: center;">错误信息</h2>
					<p class="modal-error-mess">此处将显示弹出框的错误提示信息</p>
					<div class="modal-p">
						<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>

		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!-- /.modal -->
<script type="text/javascript" src="/api-ui/static/js/modalTip.js" ></script>


<!-- 这里是执行返回失败的参数，并显示详细的信息； -->
<script type="text/javascript">

$('.successToUrl').on('click',function(){
	window.location.href='/infrommanage';
});
//表单提交前执行的onsubmit()方法；返回false时，执行相应的提示信息；返回true就提交表单到后台校验与执行
function check() {
	console.log("开始进入了");
	//提示框可能在提交之前是block状态，所以在这之前要设置成none
	$('.alert-danger').css('display', 'none');
	var isRight = 1;
	$('.form-control').each(function(index) {
		// 如果在这些input框中，判断是否能够为空
		if ($(this).val() == "") {
			// 排除哪些字段是可以为空的，在这里排除
			if (index == 3 || index == 4) {
				return true;
			}
			if(index == 3){
				
			}
			// 获取到input框的兄弟的文本信息，并对应提醒；
			 var brother = $(this).siblings('.control-label').text();
			var errorMess = "[" + brother + "输入框信息不能为空]";
			// 对齐设置错误信息提醒；红色边框
			$(this).parent().addClass("has-error has-feedback");
			$('.alert-danger').css('display', 'block');
			// 提示框的错误信息显示
			$('.error-mess').text(errorMess);
			// 模态框的错误信息显示
			$('.modal-error-mess').text(errorMess);
			isRight = 0;
			return false;
		} else {
			// 在这个里面进行其他的判断；不为空的错误信息提醒
			return true;
		}
	});
	if (isRight == 0) {
		//modalShow(0);
		 return false;
	} else if (isRight == 1) {
		//modalShow(1);
		 return true;
	}
//	return false;
}
</script>
</body>
<script type="module">
	Vue.createApp({
		//数据绑定
		data(){
			return{
				MaxId:null,
				aoaNoticeList:{
					noticeId:null,

					content:null,

					isTop:null,

					modifyTime:null,

					noticeTime:null,

					statusId:null,

					title:null,

					typeId:null,

					url:null,

					userId:null
				},
				aoaNoticeUserRelation:{
					relatinId:null,

					isRead:null,

					relatinNoticeId:null,

					relatinUserId:null
				}
			}
		},
		//此函数在vue对象创建之后，data、监听、methods...等初始化完毕之后调用此函数
		created(){

		},
		//方法区
		methods: {
			add(){
				if(this.aoaNoticeList.typeId == null || this.aoaNoticeList.typeId == ""){
					alert("类型不能为空哦");
					return;
				}
				if(this.aoaNoticeList.statusId == null || this.aoaNoticeList.statusId == ""){
					alert("状态不能为空哦");
					return;
				}
				if(this.aoaNoticeList.title == null || this.aoaNoticeList.title == ""){
					alert("标题不能为空哦");
					return;
				}
				if(this.aoaNoticeList.url == null || this.aoaNoticeList.url == ""){
					alert("链接不能为空哦");
					return;
				}
				if(this.aoaNoticeList.content == null || this.aoaNoticeList.content == ""){
					alert("描述不能为空哦");
					return;
				}

				// console.info("*** 进入保存")
				let userId = sessionStorage.getItem("userId");
				// console.info("*** userId",userId)
				this.aoaNoticeList.userId = userId;
				console.info("*** aoaNoticeList",this.aoaNoticeList)
				//添加一条数据
				requestPost("/api-core/aoaNoticeList/add",this.aoaNoticeList)
						.then((data)=>{
							console.info("data",data);
						});
				//查询刚刚添加的id
				requestGet("/api-core/aoaNoticeList/queryMax",this.page)
						.then((data)=>{
							console.info("*** data",data)
							this.MaxId = data;
							console.info("*** MaxId",this.MaxId)
						});
				this.aoaNoticeUserRelation.isRead = 0;
				this.aoaNoticeUserRelation.relatinNoticeId = this.MaxId;
				this.aoaNoticeUserRelation.relatinUserId = userId;
				//添加一条数据
				requestPost("/api-core/aoaNoticeUserRelation/add",this.aoaNoticeUserRelation)
						.then((data)=>{
							console.info("data",data);
						});
				window.location.href="/api-ui/page/informmanage.html";
			}
		}
	}).mount("#app");
</script>
</html>